<template>
  <div class="task-warp">
    <div class="checkbox-bar">
      <el-checkbox v-model="executeChecked">制定执行计划</el-checkbox>
      <i class="el-icon-arrow-down down" :class="{active : executeChecked}"></i>
      <span class="hint">说明：勾选制定测试计划后，可设置在不同的时间段定时并行发测试</span>
    </div>
    <transition name="fade">
      <div v-if="executeChecked" class="execute-bg">
        <div class="data-item" style="padding-bottom: 10px;">
          <span class="important"><i>*</i>测试时间</span>
          <el-date-picker
            @change="getInterval"
            size="mini"
            v-model="dataForm.loopTime"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerDate">
          </el-date-picker>
        </div>

        <div class="data-item border">
          <i v-if="!disabled" class="el-icon-plus plus" @click="addTabExecute"></i>
          <el-tabs v-model="executeActiveTab" type="card" closable @tab-remove="removeTabExecute">
            <el-tab-pane v-for="item in dataForm.executeList" :label="item.title" :name="item.name">
              <div class="tab-body">
                <span>时间范围：</span>
                <el-time-picker class="picker" size="mini" v-model="item.startTime" value-format="HH:mm:ss"
                                :picker-options="pickerOptions" placeholder="时:分:秒"></el-time-picker>
                <span>-</span>
                <el-time-picker class="picker" size="mini" v-model="item.endTime" value-format="HH:mm:ss"
                                :picker-options="{selectableRange: item.startTime + ' - 23:59:59'}" placeholder="时:分:秒"></el-time-picker>
                <!--<span style="margin-left: 20px">并发数：</span>-->
                <!--<el-input type="number" style="width:100px" size="mini" v-model="item.concurrentCount" placeholder="并发数" min="1"></el-input>-->
              </div>
              <div class="tab-body" v-if="isSwitch">
                <span>设置执行间隔：</span>
                <el-switch v-model="item.isInterval"></el-switch>
                <span v-if="!item.isInterval" class="hint">默认两次调度无执行间隔</span>
                <el-input v-if="item.isInterval" style="width:80px;margin-left: 10px" size="mini" :min="1" type="number" v-model="item.interval"></el-input>
                <span style="margin-left: 20px">设置执行次数：</span>
                <el-switch v-model="item.isCount"></el-switch>
                <span v-if="!item.isCount" class="hint">默认在计划时间内不间断执行</span>
                <el-input v-if="item.isCount" style="width:80px;margin-left: 10px" size="mini" :min="1" type="number" v-model="item.count"></el-input>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>

        <div class="checkbox-bar" v-if="false">
          <el-checkbox v-model="specialChecked">制定特殊计划</el-checkbox>
          <i class="el-icon-arrow-down down" :class="{active : specialChecked}"></i>
          <span class="hint">说明：勾选制定特殊测试计划后，可在测试计划日期内额外增加多次并发测试</span>
        </div>

        <transition name="fade">
          <div class="data-item border" v-if="specialChecked">
            <i v-if="!disabled" class="el-icon-plus plus" @click="addTabSpecial"></i>
            <el-tabs v-model="specialActiveTab" type="card" closable  @tab-remove="removeSpecialTab">
              <el-tab-pane v-for="(item, index) in dataForm.specialList" :label="item.title" :name="item.name">
                <div class="tab-body">
                  <div class="select-time-bar">
                    <span class="important"><i>*</i>特殊计划日期：</span>
                    <input v-model="item.specialTime" type="text" :id="item.name" placeholder="设置日期" class="calendar" @click="clickInput(item.name, index)" />
                  </div>
                  <span>时间范围：</span>
                  <el-time-picker class="picker" size="mini" v-model="item.startTime" value-format="HH:mm:ss"
                                  :picker-options="pickerOptions" placeholder="时:分:秒"></el-time-picker>
                  <span>-</span>
                  <el-time-picker class="picker" size="mini" v-model="item.endTime" value-format="HH:mm:ss"
                                  :picker-options="pickerOptions" placeholder="时:分:秒"></el-time-picker>
                  <!--<span style="margin-left: 20px">并发数：</span>-->
                  <!--<el-input type="number" style="width:100px" size="mini" v-model="item.concurrentCount" placeholder="并发数" min="1"></el-input>-->
                </div>
                <div class="tab-body" v-if="isSwitch">
                  <span>设置执行间隔：</span>
                  <el-switch v-model="item.isInterval"></el-switch>
                  <span v-if="!item.isInterval" class="hint">默认两次调度无执行间隔</span>
                  <el-input v-if="item.isInterval" style="width:80px;margin-left: 10px" size="mini" :min="1" type="number" v-model="item.interval"></el-input>
                  <span style="margin-left: 20px">设置执行次数：</span>
                  <el-switch v-model="item.isCount"></el-switch>
                  <span v-if="!item.isCount" class="hint">默认在计划时间内不间断执行</span>
                  <el-input v-if="item.isCount" style="width:80px;margin-left: 10px" size="mini" :min="1" type="number" v-model="item.count"></el-input>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </transition>
      </div>
    </transition>

  </div>
</template>
<script>
  export default {
    name:'taskPlanSet',
    props: {
      /**是否开启间隔**/
      isSwitch: {
        type: Boolean,
        default: false,
      },
      executePlanData: {
        type: Object,
        required: false
      },
      disabled: {
        type: Boolean,
        required: false,
        default: false
      }
    },
    data(){
      return {
        dataForm: {
          loopTime: [],
          executeList: [],
          specialList: []
        },
        executeChecked: true,           //执行计划
        executeActiveTab: "",           //执行tab

        specialChecked: false,          //特殊计划
        specialActiveTab: "",           //特殊tab
        pickerOptions: {selectableRange: '00:00:00 - 23:59:59'},
        pickerDate: {
          disabledDate: (time) => {
            return time.getTime() < Date.now()-8.64e7;
          }
        }
      }
    },
    created(){
      //拿到数据还原
      if (Object.keys(this.executePlanData).length > 0) {
        this.dataForm = this.executePlanData;
        this.getInterval();
        if (this.dataForm.executeList.length > 0 && this.dataForm.loopTime.length > 0) {
          this.executeChecked = true;
          this.executeActiveTab = this.dataForm.executeList[0].name;
        }
        else {
          this.executeChecked = false;
        }
        if (this.dataForm.specialList.length > 0) {
          this.specialChecked = true;
          this.specialActiveTab = this.dataForm.specialList[0].name;
        }
      }
      else {
        this.addTabExecute();
        this.executeChecked = false;
      }
    },
    watch: {
      /**监听特殊计划**/
      specialChecked(val) {
        if (this.dataForm.loopTime.length === 0 && val) {
          this.$message.warning("请先选择测试时间");
          this.specialChecked = false;
          return;
        }
        if (this.dataForm.specialList.length === 0 && val) {
          this.addTabSpecial();
        }
      }
    },
    methods:{
      /**添加通用计划tab**/
      addTabExecute() {
        let id = new Date().getTime().toString();
        let lastName = "1";
        if (this.dataForm.executeList.length > 0) {
          lastName = this.dataForm.executeList[this.dataForm.executeList.length - 1].title;
          lastName = Number(lastName.substring(2, lastName.length)) + 1;
        }
        this.dataForm.executeList.push({
          title: "计划" + lastName,
          name: id,
          concurrentCount: 1,       //并发数
          startTime: "",            //开始时间,
          endTime: "",              //结束时间
          isInterval: false,        //间隔开关
          interval: 1,              //间隔
          isCount: false,           //次数开关
          count: 1,                 //次数
        });
        this.executeActiveTab = id;
      },
      /**删除通用计划**/
      removeTabExecute(tabName) {
        if (this.disabled) {
          return;
        }
        if (this.dataForm.executeList.length === 1) {
          this.$message.warning("留一个通用计划吧.");
          return;
        }
        for (let i = 0; i <this.dataForm.executeList.length; i++) {
          if (this.dataForm.executeList[i].name === tabName) {
            this.dataForm.executeList.splice(i, 1);
            this.executeActiveTab = this.dataForm.executeList[i - 1] ? this.dataForm.executeList[i - 1].name : this.dataForm.executeList[0].name;
            break;
          }
        }
      },
      /**添加特殊计划tab**/
      addTabSpecial() {
        let id = new Date().getTime().toString();
        this.dataForm.specialList.push({
          title: "特殊计划",
          name: id,
          specialTime: "",          //特殊计划时间范围
          concurrentCount: 1,       //并发数
          startTime: "",            //开始时间,
          endTime: "",              //结束时间
          isInterval: false,        //间隔开关
          interval: 1,              //间隔
          isCount: false,           //次数开关
          count: 1,                 //次数
        });
        this.specialActiveTab = id;
      },
      /**删除特殊计划**/
      removeSpecialTab(tabName) {
        if (this.disabled) {
          return;
        }
        for (let i = 0; i <this.dataForm.specialList.length; i++) {
          if (this.dataForm.specialList[i].name === tabName) {
            this.dataForm.specialList.splice(i, 1);
            if (this.dataForm.specialList.length === 0) {
              this.specialChecked = false;
            }
            else {
              this.specialActiveTab = this.dataForm.specialList[i - 1] ? this.dataForm.specialList[i - 1].name : this.dataForm.specialList[0].name;
            }
            break;
          }
        }
      },
      /**特殊计划设置日期**/
      clickInput(node, index) {
        new Calendar().init({
          target: $("#" + node),
          range: [this.dataForm.loopTime[0], this.dataForm.loopTime[1]],
          multiple: true,
          toolbar: false,
          selected:(a,b) =>{
            if (a.length) {
              let times = [];
              a.forEach(item => {
                times.push(item.Format("yyyy-MM-dd"));
              })
              this.dataForm.specialList[index].specialTime = times.toString();
            }
          },
        });
      },
      /**拼装后的时间对象格式**/
      createdData(){
        let integrationTestTriggerParams = [];
        //1.封装通用计划时间
        this.dateArray.forEach(time => {
          this.dataForm.executeList.forEach(i => {
            integrationTestTriggerParams.push({
              concurrentCount: i.concurrentCount,       //并发数
              startTime: time + " " + i.startTime,      //开始时间,拼接yyyy-MM-dd HH:mm:ss
              endTime: time + " " + i.endTime,          //结束时间,拼接yyyy-MM-dd HH:mm:ss
              special: false,                           //是否特殊
              executeCount: 1,                          //执行次数
              count: i.count,                           //执行次数
              interval: i.interval,                     //间隔数
            })
          });
        });

        //2.封装特殊计划时间
        this.dataForm.specialList.forEach(time => {
          time.specialTime.split(",").forEach(i => {
            integrationTestTriggerParams.push({
              concurrentCount: time.concurrentCount,    //并发数
              startTime: i + " " + time.startTime,      //开始时间,拼接yyyy-MM-dd HH:mm:ss
              endTime: i + " " + time.endTime,          //结束时间,拼接yyyy-MM-dd HH:mm:ss
              special: true,                            //是否特殊
              executeCount: 1,                          //执行次数
              count: time.count,                        //执行次数
              interval: time.interval,                  //间隔数
            })
          });
        });
        return integrationTestTriggerParams;
      },
      /**获取时间间隔，年月日**/
      getInterval(){
        if (this.dataForm.loopTime.length === 0) return;
        let ab = this.dataForm.loopTime[0].split("-");
        let ae = this.dataForm.loopTime[1].split("-");
        let db = new Date();
        db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
        let de = new Date();
        de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
        let unixDb = db.getTime();
        let unixDe = de.getTime();
        this.dateArray=[];
        for (let k = unixDb; k <= unixDe;) {
          this.dateArray.push((new Date(parseInt(k))).Format("yyyy-MM-dd"));
          k = k + 24 * 60 * 60 * 1000;
        }
      },
      /**获取时间组件需要的数据**/
      getExecutePlanData() {
        return this.dataForm;
      },
    }
  }
</script>
<style lang="less" scoped>
  .task-warp {
    .checkbox-bar{
      padding: 5px 0;
      .hint{
        font-size: 12px;
        color: #459399;
        margin-left: 10px;
      }
      .down{
        transition: all 0.3s;
        font-size: 16px;
        color: #0b80c8;
        transform: rotate(0deg);
        &.active{
          transform: rotate(180deg);
        }
      }
    }
    .execute-bg{
      background: #fff;
      padding: 15px;
      border: 1px solid #e1e1e1;
      .data-item{
        position: relative;
        &.border{
          border: 1px solid #e4e7ed;
        }
        .tab-body{
          padding: 0 15px 15px 15px;
        }
        .hint{
          margin-left: 5px;
          font-size: 12px;
          color: #999;
        }
        .picker{
          width: 120px;
        }
        .plus{
          position:absolute;
          z-index: 1;
          top:10px;
          right:10px;
          cursor: pointer;
          font-size: 18px;
          color: #409EFF;
        }
        .important{
          i{
            color: red;
            margin-right: 5px;
          }
          margin-right: 10px;
        }
      }
      .select-time-bar{
        padding: 15px 0;
      }
      .calendar{
        width: calc(100% - 160px);
        border: none;
        cursor: pointer;
        outline: none;
        &::placeholder{
          color: #0aa8e9;
        }
      }
    }

  }


</style>
<style>
  .el-tabs--card>.el-tabs__header .el-tabs__nav{
    margin-left: -1px;
    margin-top: -1px;
    border-radius: 0;
  }
</style>
